<script setup>
import {inject} from "vue";
const x = ref(0);
const y = ref(0);
const handleMouseMove = (e) => {
  x.value = e.pageX;//基于整个网页，适合需要考虑滚动位置的场景。
  y.value = e.pageY;//基于整个网页，适合需要考虑滚动位置的场景。
  // x.value = e.clientX;//相对于浏览器窗口的坐标（左上角）
  // y.value = e.clientY;//相对于浏览器窗口的坐标（左上角）
  // x.value = e.screenX;//相对于电脑屏幕水平的坐标（左上角）
  // y.value = e.screenY;//相对于电脑屏幕垂直的坐标（左上角）
}

const message = inject('message', 'default message !');
onMounted(() => {
  console.log('onMounted', message);
  document.addEventListener('mousemove', handleMouseMove)
});
onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove)
});
</script >

<template >
  <slot :x="x" :y="y"></slot>
</template >

<style scoped >

</style >